<template>
  <div class="Chat">
    <div class="Chat_head">
      <p class="f16">
        <span class="hello">Hello,</span> {{ userInfo?.username||'SugarsWeet' }}! Chatting in progress...
      </p>
    </div>

    <div class="Chat_content" id="scrollContainer">
      <!-- <div class="me_box">
          <div class="me fl6">
            <p>Email: zhangyf@cuhk.edu.hk</p>
          </div>
        </div> -->
      <div class="Chat_box">
        <div class="Chat_info">
          <img src="@/public/uploadfiles/logo.png" class="Chat_icon" alt="" />
          <p class="f16 Chat_name">AITEP</p>
        </div>
        <p class="f16">Hello, {{ userInfo?.username||'SugarsWeet' }},What can I do to help you?</p>
      </div>
      <div v-for="(item, index) in historyList" :key="index">
        <div class="me_box" v-if="item.type == 1">
          <p class="me fl6">{{ item.value }}</p>
        </div>
        <div class="Chat_box" v-if="item.type == 2">
          <div class="Chat_info">
            <img src="@/public/uploadfiles/logo.png" class="Chat_icon" alt="" />
            <p class="f16 Chat_name">AITEP</p>
          </div>
          <p class="f16">{{ item.value }}</p>
        </div>
      </div>
    </div>
    <div class="Chat_bottom">
      <div class="Chat_btn">
        <div class="btn_box" :class="current_page?'curOn':''" @click="chatClick">
          <img src="/public/images/chat.png" />
          Chat with web pages
        </div>
        <div :class="`Summarize ${SummarizeShow ? 'Summarize_show' : ''}`">
          <div class="Chat_link">
            <img src="@/public/uploadfiles/logo.png" class="Chat_icon" alt="" />
            <div class="link_info">
              <p class="f16 Chat_name">AITEP</p>
              <p class="f16">
                http://aitep.drugsea.com/home/APlist/Detail/A00278
              </p>
            </div>
          </div>
          <div class="btn_box">
            <img src="/public/images/chat1.png" />
            Summarize
          </div>
        </div>
      </div>
      <div class="Chat_input">
        <el-input
          placeholder="Press' Ctrl+'to quickly ask a question ..."
          :rows="3"
          type="textarea"
          :maxRows="3"
          resize="none"
          @keyup.enter="toSend"
          v-model="message"
        />
        <div class="sending" @click="toSend">
          <img src="/images/sending.png" class="sending_btn" />
        </div>
      </div>
    </div>
  </div>
</template>  
<script>
import { bot_chat } from "@/api/sections";
export default {
  data() {
    return {
      message: "",
      historyList: [],
	  current_page:0,
      SummarizeShow: false,
      userInfo:''
    };
  },
  mounted: function () {
    if (localStorage.getItem("chatMsgList")) {
      this.historyList = JSON.parse(localStorage.getItem("chatMsgList"));
    };
    if (localStorage.getItem("userinfo")) {
      this.userInfo = JSON.parse(localStorage.getItem("userinfo"));
    }
  },

  methods: {
	  chatClick(){
		  this.current_page=!this.current_page
	  },
    toBottom() {
      const scrollContainer = document.getElementById("scrollContainer");

      scrollContainer.scrollTop = 999999;
    },
    toSend(e) {
      console.log(this.message, 121221);
      if (this.message.trim() == "") {
        ElMessage({
          message: "Please enter content",
          type: "error",
        });
        return;
      }
      if (!localStorage.getItem("userinfo")) {
        this.$router.push({
          path: `/login`,
        });
        return;
      }
      let item = {
        type: 1,
        value: this.message,
      };
      this.historyList.push(item);
      let post = {
					current_page:this.current_page?1:0,
        message: JSON.parse(JSON.stringify(this.message)),
      };
      if (localStorage.getItem("userinfo")) {
        this.userInfo = JSON.parse(localStorage.getItem("userinfo"));
        post.token = this.userInfo.token;
      }
      this.message = "";
      bot_chat(post).then((res) => {
        if (res) {
          if (res.data && res.data.length > 0) {
            let item1 = {
              type: 2,
              value: res.data[0].content,
            };
            this.historyList.push(item1);

            let curIndx = this.historyList.length - 1;
            res.data.some((it, idx) => {
              if (idx > 0) {
                setTimeout(() => {
                  this.historyList[curIndx].value += it.content;
                  this.toBottom();
                }, 100 * idx);
              }
            });
            this.message = "";
            setTimeout(() => {
              localStorage.setItem(
                "chatMsgList",
                JSON.stringify(this.historyList)
              );
            }, 3000);
          }
        }
      });
    },
  },
};
</script>
<style>
	.curOn{
		border: solid 1px #4bb1b9 !important;
	}
</style>
